<script setup lang="ts">
import request from '@/request/request'
import { reactive,ref } from 'vue';
import { ElMessage } from 'element-plus'
import router from '@/router';

const user = reactive({
  userId:''
})

let query = router.currentRoute.value.query;
user.userId = (query.userId as string);

const loading = ref(false);

function join() {
  if (!user.userId) {
    ElMessage("请输入你的游戏Id");
    return;
  }
  loading.value = true;
  request({
    method: 'post',
    url: '/room/distribution',
    data: {
      userId: user.userId
    }
  }).then(data => {
    loading.value = false;
    if (data) {
      router.push({path: "room", query: {
        roomId: (data as any),
        userId: user.userId
      }})
    }
  })
}


</script>

<template>
  <main>
    <div class="home" v-loading="loading">
      <el-input class="input-uid" autofocus v-model="user.userId" placeholder="游戏Id" />
      <el-button class="btn-join" type="primary" @click="join"  v-loading.fullscreen.lock="loading">加入</el-button>
    </div>
  </main>
</template>
<style scoped lang="scss">
.home {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .input-uid{
    width: 30%;
    height: 20%;
    font-size: 20px;
  }
  .btn-join {
    margin-top: 20px;
    width: 30%;
    height: 30%;
    font-size: 100px;
  }

}
</style>
